import React, { useReducer, useEffect } from 'react'
import { initState, reducer, actions } from "./login"
// 引入api
import { reqLogin } from "../../request/api";
// 引入css样式
import "./login.css"

export default function Login(props) {
    const [state, dispatch] = useReducer(reducer, initState);
    //相当于生命周期
    useEffect(() => {

    }, []);
    let req = () => {
        reqLogin(state.user).then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeInfo(res.data.list))
                props.history.push("/index/home")
            }
        })

    }
    return (
        <div className="login">
            <h2>登录</h2>
            <div className="main">
                <div>手机号<input type="text" value={state.user.phone} onChange={(e) => dispatch(actions.changeUser("phone", e.target.value))} /></div>
                <div>密码<input type="text" value={state.user.password} onChange={(e) => dispatch(actions.changeUser("password", e.target.value))} /></div>
                <div><button onClick={() => { req() }}>登 录</button></div>
            </div>
        </div>
    )
}
